<template>
  <div>
    <div class="title_warnning">
      <i
        class="el-icon-warning-outline mr10"
      />根据会员的基础信息，使用习惯、活跃程度等，给会员用户进行画像分组，以便实现精准营销
    </div>
    <div class="mt20">
      <el-button
        :disabled="portrayalList.length > 19"
        type="primary"
        @click="handleEdit()"
      >
        <i class="el-icon-plus" />
        <span>新建人群（{{ portrayalList.length + "/" + 20 }}）</span>
      </el-button>
      <span class="ml20 placeholder9">支持拖拽排序</span>
    </div>
    <div>
      <Draggable
        v-model="portrayalList"
        class="portrayal_list"
        draggable=".item"
        @end="draggableChange"
      >
        <template v-for="(item, index) in portrayalList">
          <div :key="item.id" class="item">
            <img class="drag" src="@/assets/icon/drag.png">
            <div class="header">
              <div class="h2 df">
                <img
                  src="@/assets/icon/crowd.png"
                  style="width: 16px; height: 14px; margin-right: 2px"
                  alt=""
                >
                <span>{{
                  item.portraitName.length > 9
                    ? item.portraitName.substring(0, 9) + "..."
                    : item.portraitName
                }}({{ item.peopleNum || 0 }}人)</span>
              </div>
              <div class="time">
                <template v-if="item.status != '1'">
                  <span @click="handlePlay(item, index)">{{
                    item.lastUpdateTime
                  }}</span>
                  <span @click="handlePlay(item, index)">更新</span>
                </template>
                <i
                  :class="{ rotate360: item.status == '1' }"
                  class="el-icon-refresh-right changeIcon iconfont icon-iconfontshuaxin"
                  @click="handlePlay(item, index)"
                />
              </div>
            </div>
            <div class="condition_desc fs12 placeholder9">
              {{ item.conditions }}
            </div>
            <div class="content">
              <div class="text">{{ item.desc }}</div>
            </div>
            <div v-if="item.status !== '1'" class="footer">
              <div>
                <el-popover
                  placement="bottom"
                  width="90"
                  popper-class="nopadding"
                  trigger="click"
                >
                  <div class="more_btns" style="text-align: center">
                    <div class="btn pointer mb2" @click="handleEx(item)">导出</div>
                    <div class="btn pointer mb2" @click="handleDetail(item)">
                      查看
                    </div>
                    <div class="btn pointer mb2" @click="handleEdit(item)">
                      编辑
                    </div>
                    <div class="btn pointer" @click="handleDel(item)">
                      删除
                    </div>
                    <!-- <div class="btn pointer mb2">营销计划</div> -->
                  </div>
                  <div slot="reference">更多操作<i class="el-icon-caret-bottom" style="margin-left: 4px;" /></div>
                </el-popover>
              </div>
              <div class="btns">
                <el-button
                  @click="openMarketing(item)"
                >定向营销</el-button>
                <el-button
                  @click="openCoupon(item)"
                >定向发券</el-button>
                <el-button
                  @click="openSMS(item)"
                >群发短信</el-button>
              </div>
            </div>
          </div>
        </template>
      </Draggable>
    </div>

    <Edit
      v-if="isShowEdit"
      ref="EditRef"
      @close="isShowEdit = false"
      @success="delayGetList()"
    />
    <MassTexting
      v-if="isShowSMS"
      ref="MassTextingRef"
      @close="isShowSMS = false"
      @openPortrayal="handleEdit()"
      @success="delayGetList()"
    />
    <DirectedCoupon
      v-if="isShowCoupon"
      ref="DirectedCouponRef"
      @close="isShowCoupon = false"
      @openPortrayal="handleEdit()"
      @success="delayGetList()"
    />
    <Marketing
      v-if="isShowMarketing"
      ref="MarketingRef"
      @openPortrayal="handleAddP"
      @success="delayGetList()"
      @close="isShowMarketing = false"
    />
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import Edit from './Edit.vue'
import MassTexting from './MassTexting'
import DirectedCoupon from './DirectedCoupon.vue'
import Marketing from '../Marketing/Edit'
import _ from 'lodash'
import {
  portrayalPostList,
  portrayalPostDel,
  portrayalPostDrag,
  portrayalMemberEx,
  portrayalPdPostUpdate
} from '@/api'
export default {
  components: {
    Draggable,
    Edit,
    MassTexting,
    DirectedCoupon,
    Marketing
  },
  data() {
    return {
      isShowEdit: false,
      isShowSMS: false,
      isShowCoupon: false,
      isShowMarketing: false,

      portrayalList: []
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    document.body.ondrop = function(event) { event.preventDefault(); event.stopPropagation() }
  },
  methods: {
    routerPush(path) {
      this.$router.push(path)
    },
    draggableChange() {
      const { portrayalList } = this
      portrayalPostDrag({
        param: {
          list: portrayalList.map((i, index) => {
            return {
              id: i.portraitId,
              sortNum: index
            }
          })
        }
      })
    },
    getList() {
      portrayalPostList({ param: {}}).then(res => {
        this.portrayalList = res.recordList || []
      })
    },
    delayGetList() {
      this.getList()
      setTimeout(() => {
        this.getList()
      }, 3000)
    },
    handleEdit(row) {
      this.isShowEdit = true
      this.$nextTick(() => {
        if (row && row.portraitId) {
          this.$refs.EditRef.initData(row.portraitId)
        } else {
          this.$refs.EditRef.initData()
        }
        this.$refs.EditRef.isShowModal = true
      })
    },
    handleDetail(item) {
      this.$router.push({
        name: 'PortrayalDetail',
        query: {
          id: item.portraitId,
          portraitName: item.portraitName,
          conditions: item.conditions
        }
      })
    },
    handleAddP() {
      this.isShowMarketing = false
      this.handleEdit()
    },
    handleDel(row) {
      const that = this
      this.$confirm('此操作将删除该画像, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          portrayalPostDel({ param: { id: row.portraitId }}).then((res) => {
            if (res.errorCode !== '000000') return
            that.$message.success('删除成功')
            that.getList(1)
          })
        })
    },
    handleEx(row) {
      portrayalMemberEx({ param: { id: row.portraitId }})
        .then((res) => {
          if (res.errorCode === '000000') {
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => {
        })
    },
    openSMS(item) {
      this.isShowSMS = true
      this.$nextTick(() => {
        this.$refs.MassTextingRef.isShowModal = true
        this.$refs.MassTextingRef.param.portraitId = item.portraitId
      })
    },
    openCoupon(item) {
      this.isShowCoupon = true
      this.$nextTick(() => {
        this.$refs.DirectedCouponRef.isShowModal = true
        this.$refs.DirectedCouponRef.param.obj = item.portraitId
      })
    },
    openMarketing(item) {
      this.isShowMarketing = true
      this.$nextTick(() => {
        this.$refs.MarketingRef.isShowModal = true
        this.$refs.MarketingRef.param.portraitId = item.portraitId
        this.$refs.MarketingRef.changeType('1')
      })
    },
    handlePlay(item, index) {
      this.portrayalList.forEach((ite, i) => {
        if (index === i) {
          ite.status = '1'
        }
      })
      portrayalPdPostUpdate({ param: { id: item.portraitId }}).then(res => {
        this.getList()
        setTimeout(() => {
          this.getList()
        }, 3000)
      })
    },
    reset() {
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.portrayal_list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5%;
  .item {
    @media screen and (max-width: 1920px) {
      width: 24%;
    }
    @media screen and (max-width: 1600px) {
      width: 32%;
    }
    @media screen and (max-width: 1120px) {
      width: 49%;
    }
    height: 204px;
    margin: 10px 0.5%;
    border: 1px solid #dfe2e8;
    cursor: pointer;
    position: relative;
    padding: 16px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      .h2 {
        font-size: 16px;
      }
    }
    .content {
      width: 100%;
      margin-top: 8px;
      height: 70px;
      background: #f4f7fc;
      border-radius: 2px;
      padding: 10px 12px;
      .text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
    .condition_desc {
      width: 100%;
      display: block; /* 块级 */
      overflow: hidden; /* 超出隐藏 */
      text-overflow: ellipsis; /* 显示省略号 */
      white-space: nowrap; /* 一行 */
    }
    .footer {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btns {
        display: flex;
        .el-button {
          padding: 4px 6px;
        }
      }
    }
    .drag {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 1px;
      top: 1px;
    }
  }
}
.rotate360 {
  animation: rotate360 1s linear 0s 2;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.title_warnning {
  height: 36px;
  line-height: 36px;
  background: #f0f3fa;
  border-radius: 2px;
  color: #435ebe;
  padding-left: 20px;
}
.more_btns {
        text-align: center;
        div {
          line-height: 32px;
          &:hover {
            color: #fff;
            background: $primaryColor;
          }
        }
      }
</style>
